<template>
  <div>
    <common-head title="商品详情" />
    <div class="wrap">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
        <van-swipe-item v-for="banner in pics" :key="banner.id">
          <img :src="banner.pic" alt="" style="width: 100%" />
        </van-swipe-item>
      </van-swipe>
      <div class="gray">a</div>
      <div class="content">
        <div class="top">
          <h4>{{ basicInfo.name }}-{{ basicInfo.tags }}</h4>
          <span>☆</span>
        </div>
        <div class="bottom">
          <span class="now">￥{{ basicInfo.minPrice }}</span>
          <span class="old">￥{{ basicInfo.originalPrice }}</span>
          <span class="sale"
            >下单立减{{ basicInfo.originalPrice - basicInfo.minPrice }}元</span
          >
        </div>
      </div>
      <div class="gray aa">a</div>
      <div>
        <p class="pic-detail">图文详情</p>
      </div>
      <div v-html="content"></div>
      <!-- 加入购物车 + 立即购买 -->
      <van-goods-action class="goods-nav">
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="$store.state.cart.items.length || ''" @click='$router.push("/cart")' />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="showPopup(1)"
        />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="showPopup(0)"
        />
      </van-goods-action>
      <!-- 自定义弹出层 -->
      <van-popup
        round
        v-model="show"
        position="bottom"
        :style="{ height: '30%' }"
        closeable
        close-icon="close"
      >
        <div class="goods-card">
            <van-card
          num="1"
          :price="sku.minPrice"
          :desc="basicInfo.name"
          :title="basicInfo.tags"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
            >
          <template #footer>
            <van-stepper v-model="sku.num" />
            <van-button type="danger" style='width:100%;border-radius:20px' @click="toUrl">确定</van-button>
          </template>
        </van-card>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { Toast } from 'vant'
import { fetchDetail } from '@api'
export default {
  data () {
    return {
      basicInfo: {}, // 详情页返回的是对象
      pics: [],
      content: '',
      show: false, // 控制弹出层是否显示
      sku: {}, // 这个用来接收商品卡片中的商品信息数据
      toUrlCode: 0 // 这个用来标记点击相同的确定框的时候，要跳转到是购买还是购物车 0表示购买，1表示购物车 ---》这个可以绑定在点击这两个按钮的事件上，进行传参判断
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    toUrl () {
      if (this.toUrlCode === 0) {
        // alert('到立即购买页面')
      } else {
        // alert('到购物车页面')
        this.$store.commit('cart/add_cart', this.sku)
        Toast('加入购物车啦，赶紧去看看吧')
        this.show = false
      }
    },
    showPopup (n) {
      this.show = true
      this.toUrlCode = n
    },
    fetchDetail () {
      fetchDetail(this.$route.query.id).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.content = res.data.data.content
          this.sku = {
            ...res.data.data.basicInfo,
            num: 1,
            checked: true
          }
        }
      })
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  margin-bottom: 46px;
  .goods-card{
      margin: 20px;
  }
  .van-card__title{
      margin-top: 8px;
      font-size: 18px;
      color: #222;
  }
  .van-card__desc{
      font-size: 12px;
      margin-top: 15px;
  }
  .van-stepper{
      margin-top: 5px;
  }
  /deep/.wscnph {
    width: 100%;
    display: block;
  }
  /deep/.gray {
    display: block;
    width: 100%;
    background: #eee;
    color: transparent;
  }
  .aa {
    height: 10px;
  }
  .pic-detail {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
  }
  .content {
    margin-top: 10px;
    margin-left: 20px;
    padding-right: 15px;
    .top {
      display: flex;
      justify-content: space-between;
    }
    .bottom {
      margin-top: 8px;
      margin-bottom: 14px;
      .now {
        color: orange;
        font-weight: bold;
        font-size: 24px;
        margin-right: 10px;
      }
      .old {
        color: #ccc;
        text-decoration: line-through;
        margin-right: 20px;
      }
      .sale {
        margin-left: 114px;
        font-size: 12px;
        padding: 4px;
        background: #333;
        color: #fff;
        border-radius: 10px;
      }
    }
  }
}
</style>
